<template>
  <div class="home">
    <my-header>
      <span>郑州</span>
    </my-header>

    <my-input v-model="keyword"></my-input>
    <van-button type="primary" @click="search">提交</van-button>

    <ul class="con">
      <li
        v-for="(item, index) in searchList"
        :key="index"
        @click="gotoList(item)"
      >
        {{ item.name }}
      </li>
    </ul>
  </div>
</template>

<script>
import myInput from "../components/myInput.vue";
import myHeader from "../components/myHeader.vue";
import { ref, reactive, toRefs } from "vue";

import { getSearch } from "../utils/ele";
//引入搜索方法

import { useRouter } from "vue-router";

export default {
  name: "Home",
  components: {
    myInput,
    myHeader,
  },
  setup(props) {
    const router = useRouter();
    const data = reactive({
      keyword: "",
      //搜索关键字
      searchList: [],
      //搜索的列表
    });

    const search = () => {
      getSearch(data.keyword).then((res) => {
        console.log(res);
        data.searchList = res;
      });
    };

    const gotoList = (item) => {
      router.push({
        path: "/about",
        query: {
          name: item.name,
          latitude: item.latitude,
          longitude: item.longitude,
        },
      });
      //传参传 标题名字和经纬度
    };
    //跳转到商家列表页

    return { ...toRefs(data), search, gotoList };
  },
};
</script>
<style lang="scss">
.home {
  .con {
    li {
      height: 30px;
      border: 1px solid #ccc;
    }
  }
}
</style>
